---
sidebar_position: 1
---

import ImagePreview from "@site/src/components/ImagePreview";

# 工具栏  

<ImagePreview alt="工具栏" src="/img/docs/设计器/工具栏/tool-bar-intro.jpg" />

## 介绍 

工具栏包含了大屏设计当中需要用的一些实用方法。  

包括[前进后退](#redo)、[图层](#layer)、[辅助线](#guide)、[过滤器](#filter)、[全局常量](#constant)、[全局本地配置](#local)、[折叠组件列表](#collapse)、[滤镜](#lens)、[主题色](#theme)    

## 功能  

### 前进后退 {#redo}

设计器当中保存了操作的步骤。  
点击后退按钮  
撤销前一步骤的操作，点击前进按钮取消撤销步骤。 

同样的，画布中设置了对应的键盘操作。  
`ctrl z`或`cmd z` 后退。  
`ctrl y`或`cmd y` 前进。 

### 图层 {#layer}
  
  图层记录了画布中所有*组件*的集合。  
  <ImagePreview alt="图层" src="/img/docs/设计器/工具栏/layer-manage.png" />

  顶部**菜单按钮**切换列表的展示模式（**列表**或**图标列表**）  

  双击列表项修改组件名称。  

  拖动列表项修改组件在列表中的顺序。  

  <ImagePreview alt="排序" src="/img/docs/设计器/工具栏/layer-manage-drag.png" />

  右侧**阴影条**拖拽调整列表宽度。  

  **鼠标右键**展开对应组件的工具条。  

  <ImagePreview alt="右键菜单" src="/img/docs/设计器/工具栏/layer-manage-menu.png" />  

  
  具体的功能可查看画布文档。[传送门](/docs/设计器/画布#dropdown)

  右侧图标为**锁定**和**显示隐藏**  
  该功能同样包含在右键菜单中，可查看该文档。  
    
### 辅助线 {#guide}

  控制**画布**中的*辅助线*的显示隐藏。  

  具体的功能可查看画布文档。[传送门](/docs/设计器/画布#guide)   
### 过滤器 {#filter}

  过滤器为组件数据的**清洗**操作。  
  将*静态数据*或*网络请求数据*等进行预先处理，或者针对某些条件设置不同的数据。  

  具体的功能可查看画布文档。[传送门](/docs/设计器/配置/组件配置/数据#过滤器)   

  <ImagePreview alt="回调管理" src="/img/docs/设计器/工具栏/callback-manage.png" /> 

  工具栏中的功能为**全局管理**当前*大屏*中使用的所有过滤器。  

  包含查看各个过滤器被**使用的情况**、**删除过滤器**、**复制过滤器**操作。  

### 全局常量 {#constant}  
  
  可在当前大屏的全局，设置一系列固定的值，该值可以在组件当中使用，比如：
  1. 数据请求的`url`  
  2. 数据请求的`body`、`header`  
  3. 过滤器依赖的全局参数  
  等等  

  <ImagePreview alt="常量管理" src="/img/docs/设计器/工具栏/constant-manage.png" /> 
  
:::tip 例子🌰

**不同环境**下数据请求的`url`会不同，可以通过该方法统一设置在全局，后期修改地址可以直接修改全局常量。

:::

### 全局本地配置 {#local} 

  此配置不会对大屏制作有任何影响，单纯对设计器的相关样式做配置，只是个人喜好的设置。  

  <ImagePreview alt="本地配置" src="/img/docs/设计器/工具栏/local-config.jpg" />   

  - 对设计器画布部分的背景进行了可配置。（2022-05-28）  
  - 是否开启跨屏复制组件。（2022-10-10）    

  后期会支持更多地方的配置。  

### 折叠组件列表（2022-09-02）{#collapse}    
  可以将右边的组件列表进行折叠，方便大屏的设计。  

### 滤镜（2022-09-02）{#lens}  
  为大屏画布增加全局的滤镜效果，显示不同的样式。  
  <ImagePreview alt="滤镜" src="/img/docs/设计器/工具栏/lens-config.jpg" /> 

### 主题色（2022-10-18）{#theme}  
  允许动态修改大屏的主题色。  
  <ImagePreview alt="主题色" src="/img/docs/设计器/工具栏/theme-config.jpg" /> 
